<script setup>
import { Document, Postcard, User, Memo, ChatLineRound, UserFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

// 页面路由对象
const route = useRoute()

</script> 

<template >
    <div class="hospital">
        <div class="menu" >
            <el-icon style="margin-left: 20px"><UserFilled/></el-icon>
            <span style="color: #7f7f7f;" >/ 会员中心</span>
        <el-menu
        :default-active="route.path"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/user/vip"  >
            <el-icon><Postcard /></el-icon>
          <span>实名认证</span>
        </el-menu-item>
        <el-menu-item index="/user/order" >
            <el-icon><Memo /></el-icon>
          <span>挂号订单</span>
        </el-menu-item>
        <el-menu-item index="/user/patient" >
            <el-icon><User /></el-icon>
          <span>就诊人管理</span>
        </el-menu-item>
        <el-menu-item index="/user/profile" >
            <el-icon><Document /></el-icon>
          <span>账号信息</span>
        </el-menu-item>
        <el-menu-item index="/user/feedback" >
            <el-icon><ChatLineRound /></el-icon>
          <span>意见反馈</span>
        </el-menu-item>
      </el-menu>
        </div>
        <div class="conetnt">
            <router-view></router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .hospital {
        // width: 100vw;
        width: 100%;
        display: flex;
        .menu {
            width: 15%;
            // background-color: red;
            .el-menu-vertical-demo {
                width: 80%;
            }
        }
        .content {
            flex: 1;
            background-color: pink;
            width: 1000px;
            
        }
    }
</style>